<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 自定义toggle导航栏 -->
      <toggle-nav-bar
        :title="bussinessInfo.StoreName"
        right-icon="ellipsis"
        @right-icon-click="$utils.unfinish()"
      />

      <!-- 商家swiper -->
      <van-swipe :autoplay="3000" indicator-color="white" @change="swiperChange">
        <van-swipe-item @click="showSwiperImg" v-for="(item, index) in swiperImg" :key="index">
          <!-- <img class="van-swipe-item__img" v-lazy="item" alt="swiper" /> -->
          <van-image width="100%" height="5rem" v-lazy :src="item" alt="swiper" fit="cover" />
        </van-swipe-item>
      </van-swipe>

      <!-- 商家店铺信息 -->
      <div class="bussiness bg-white">
        <div class="bussiness-info">
          <van-button type="danger" size="small" class="buy-btn" :to="buyBill">优惠买单</van-button>
          <div class="flex">
            <van-image
              class="bussiness-info__avar"
              v-lazy
              :src="
                bussinessInfo.Logo
                  ? $webInfo.ImgDomain + bussinessInfo.Logo
                  : require('@/assets/images/no-img.jpg')
              "
              alt="店铺头像"
              fit="cover"
            />
            <div class="bussiness-info__content">
              <h2 class="name fs-40 fw-700 lh-xs">{{ bussinessInfo.StoreName }}</h2>
              <van-rate
                v-model="bussinessInfo.Score"
                color="#ff435b"
                void-icon="star"
                void-color="#dcdcdc"
                readonly
              />
              <!-- <p class="fs-30">
              <span>80条</span>
              <span class="ml-20">¥92/人</span>
              </p>-->
              <p class="fs-20 color-gray-light">
                <span class="mr-20">{{ bussinessInfo.CategoryName }}</span>
              </p>
            </div>
          </div>
          <div class="mt-20 fs-24">
            <span>
              店铺说明：{{
              bussinessInfo.StoreExplain ? bussinessInfo.StoreExplain : '暂无'
              }}
            </span>
            <!-- <span>口味：7.5</span>
          <span class="ml-20">环境：7.5</span>
          <span class="ml-20">服务：7.5</span>
            <span class="ml-20">食材：7.2</span>-->
          </div>
        </div>
        <div class="bussiness-time">
          <div class="flex flex-v-c">
            <van-icon name="shop-o" size="0.5rem" color="#999" />
            <span class="fs-30 mlr-10">{{ bussinessInfo.BusinessStatus }}</span>
            <span class="fs-30">|</span>
            <span class="fs-24 mlr-10">
              营业时间：{{
              bussinessInfo.BusinessHours
              ? bussinessInfo.BusinessHours
              : '未知'
              }}
            </span>
          </div>
          <!-- <div class="plr-30 ptb-5">
          <van-tag class="mg-5" color="#f9f9f9" text-color="#999">可停车</van-tag>
          <van-tag class="mg-5" color="#f9f9f9" text-color="#999">有WIFI</van-tag>
          </div>-->
        </div>
        <div class="bussiness-location flex flex-s-b flex-v-c">
          <div class="fle-1" @click="showAmap = true">
            <div class="flex flex-v-c">
              <van-icon name="location-o" size="0.5rem" color="#999" />
              <span class="fs-30 mlr-10">
                {{
                bussinessInfo.ContactAddress
                ? bussinessInfo.ContactAddress
                : '地址未知'
                }}
              </span>
            </div>
            <p class="fs-24 color-gray-light ml-30 plr-15">{{ bussinessInfo.AddressDescription }}</p>
          </div>
          <a :href="'tel:' + bussinessInfo.ContactTel">
            <van-icon name="phone" size="1rem" color="#ff435b" />
          </a>
        </div>
      </div>
      <!-- 商家各种详情 -->
      <van-tabs
        v-model="activeTabsName"
        title-active-color="#ff435b"
        title-inactive-color="#000000"
        color="#ff435b"
        sticky
        :swipeable="swipeable"
        animated
        :offset-top="offsetTop"
        :lazy-render="false"
      >
        <van-tab title="简介" name="introduction">
          <div class="bussiness-introduction bg-white mb-20">
            <van-skeleton
              class="ptb-30"
              title
              :row="5"
              :loading="JSON.stringify(bussinessInduc) == '{}'"
            >
              <div class="environment pd-30">
                <p v-if="environmentImg.length > 0" class="mb-30">商家环境</p>
                <ul class="flex flex-wrap">
                  <li v-for="(item, index) in environmentImg" :key="index">
                    <van-image
                      class="environment__img"
                      width="2rem"
                      height="2rem"
                      v-lazy
                      :src="item"
                      alt="环境图片"
                      fit="cover"
                      @click="showEnvironmentImg(index)"
                    />
                  </li>
                </ul>
                <p class="color-gray ptb-20">
                  {{
                  bussinessInduc.Description
                  ? bussinessInduc.Description
                  : '暂无商家介绍'
                  }}
                </p>
              </div>
              <div class="location flex flex-s-b pd-30">
                <p class="fle-1">商家地址</p>
                <p class="fle-2">
                  {{
                  bussinessInduc.ContactAddress
                  ? bussinessInduc.ContactAddress
                  : '未知'
                  }}
                </p>
              </div>
              <div class="flex flex-s-b pd-30">
                <p class="fle-1">联系方式</p>
                <a :href="'tel:' + bussinessInduc.ContactTel" class="fle-2">
                  {{
                  bussinessInduc.ContactTel ? bussinessInduc.ContactTel : '未知'
                  }}
                </a>
              </div>
            </van-skeleton>
          </div>
        </van-tab>
        <!-- <van-tab title="商品" name="goods">
        <div class="bussiness-goods mb-20">
          <div class="bg-white">
            <van-cell is-link label="网友推荐(23)" @click="activeTabsName='recommendation'">
              <template slot="title">
                <span class="fs-34 fw-700">推荐</span>
              </template>
            </van-cell>
            <ul
              class="list pl-30 pb-30 flex"
              @touchstart="swipeable = false"
              @touchend="swipeable = true"
            >
              <li
                class="pr-20"
                v-for="(item,index) in recommendImg"
                :key="index"
                @click="activeTabsName='recommendation'"
              >
                <van-image width="2rem" height="2rem" v-lazy :src="item" alt="推荐图片" fit="cover" />
                <p class="fs-24 tac toe" style="width:2rem;">复仇者联盟</p>
              </li>
            </ul>
          </div>
          <div class="mt-20 bg-white flex">
            <ul class="tab">
              <li class="ptb-20 plr-10 active">热门上映</li>
              <li class="ptb-20 plr-10">好评高分</li>
              <li class="ptb-20 plr-10">爱情言情</li>
              <li class="ptb-20 plr-10">经典科幻</li>
              <li class="ptb-20 plr-10">恐怖惊悚</li>
              <li class="ptb-20 plr-10">武侠动作</li>
            </ul>
            <ul class="goods-list pd-20">
              <li class="mb-20 flex" v-for="index in 4" :key="index" @click="goGoodDetail">
                <van-image
                  class="goods-list__img"
                  width="2rem"
                  height="2rem"
                  v-lazy
                  src="http://img.jdzj.com/UserDocument/2017a/wwk123/Picture/201771018459.jpg"
                  alt="商品图片"
                  fit="cover"
                />
                <div class="goods-list__content ml-10 toe">
                  <h3 class="fs-30 lh-xs toe">复仇者联盟</h3>
                  <p class="color-gray-light fs-24 toe">上映时间：今晚22：00</p>
                  <div class="flex flex-s-b mt-20">
                    <p class="goods-list__price">￥98.00</p>
                    <div class="goods-list__buy flex flex-v-c">
                      <van-button round type="danger">-</van-button>
                      <span class="plr-10 tac">1</span>
                      <van-button round type="danger">+</van-button>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="has-bottom"></div>
        </div>
        </van-tab>-->
        <van-tab title="点评" name="evaluation">
          <van-list
            v-model="evalLoading"
            :finished="evalFinished"
            :finished-text="
              evaluationList.length > 0
                ? '没有更多了哦！'
                : '暂无评论哦，快来抢沙发吧！'
            "
            :offset="10"
            @load="evalOnLoad"
            :immediate-check="false"
            ref="list"
          >
            <van-cell>
              <template slot="title">
                <span class="fs-34 fw-700">精选点评</span>
                <span class="ml-10 color-gray-light fs-24">({{ evalRecordAmout }})</span>
              </template>
            </van-cell>
            <!-- 点评列表 -->
            <ul class="evaluation-list mb-20 bg-white">
              <li class="evaluation-item flex" v-for="(item, index) in evaluationList" :key="index">
                <van-image
                  class="evaluation-item__avar"
                  v-lazy
                  :src="
                    item.HeadPortrait
                      ? $webInfo.ImgDomain + item.HeadPortrait
                      : require('@/assets/images/no-avar.jpg')
                  "
                  alt="头像"
                  fit="cover"
                />
                <div class="evaluation-item__content">
                  <!-- <van-button class="attention" round size="small" icon="plus" type="danger">关注</van-button> -->
                  <h6 class="name fs-30 toe">{{ item.NickName ? item.NickName : '游客' + item.Id }}</h6>
                  <p class="fs-20 color-gray-light">{{ item.AddTime }}</p>
                  <!-- <span class="status fs-24">消费后点评</span> -->
                  <div class="mtb-10 flex flex-v-c">
                    <span>打分</span>
                    <van-rate
                      class="mlr-10 flex flex-v-c"
                      v-model="item.Star"
                      color="#ff435b"
                      void-icon="star"
                      void-color="#dcdcdc"
                      readonly
                    />
                    <!-- <span>￥92/人</span> -->
                  </div>
                  <p>{{ item.Content }}</p>
                  <ul class="flex flex-wrap">
                    <li class="pr-20 pb-20" v-for="(item2, index2) in item.Images" :key="index2">
                      <van-image
                        width="2rem"
                        height="2rem"
                        v-lazy
                        :src="
                          item2 ? item2 : require('@/assets/images/no-img.jpg')
                        "
                        alt="商品图片"
                        fit="cover"
                        @click="showEvaluationImg(item.Images, index2)"
                      />
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </van-list>
          <div class="has-bottom"></div>
        </van-tab>
        <van-tab title="推荐" name="recommendation">
          <!-- 推荐商户列表 -->
          <bussiness-list
            :condition="bussinessCondition"
            :disabledRefresh="true"
            :isRefresh="isRefresh"
            @listRefresh="listRefresh"
          />
        </van-tab>
      </van-tabs>

      <!-- 商品购物车 -->
      <shop-cart :showBuy="false" v-if="activeTabsName == 'goods'"></shop-cart>

      <!-- 点评(发视频或写点评) -->
      <div v-show="activeTabsName == 'evaluation'" class="evaluate flex">
        <div class="plr-10 mlr-20" @click="$utils.unfinish()">
          <svg-icon icon-class="camera" />
          <p class="color-gray-light fs-24">发视频</p>
        </div>
        <div class="plr-10 mlr-20">
          <router-link
            :to="{
              path: '/writeEvaluation',
              query: { id: bussinessInfo.Id, name: bussinessInfo.StoreName },
            }"
          >
            <svg-icon icon-class="evaluate" />
            <p class="color-gray-light fs-24">写点评</p>
          </router-link>
        </div>
      </div>
    </van-pull-refresh>

    <!-- 门店定位地图 -->
    <transition name="van-slide-right">
      <store-amap
        v-show="showAmap"
        :initAmap="initAmap"
        :bussinessInfo="bussinessInfo"
        @closeAmap="showAmap = false"
      />
    </transition>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
import toggleNavBar from 'components/toggleNavBar'
import bussinessList from 'components/bussinessList'
import shopCart from 'components/shopCart'
import storeAmap from 'components/storeAmap'
import { getDetailInfo, getDescription } from 'api/store'
import { getPageList } from 'api/memberComment'

export default {
  components: {
    toggleNavBar,
    bussinessList,
    shopCart,
    storeAmap
  },
  props: {
    clientWidth: {
      type: Number,
      default: document.body.clientWidth
    }
  },
  data() {
    return {
      // 下拉刷新
      isLoading: false,
      bussinessInfo: {},
      bussinessInduc: {},
      // swiper图片
      swiperImg: [
        'http://img.jdzj.com/UserDocument/2017a/wwk123/Picture/201771018459.jpg',
        'http://img3.winshang.com/Upload/brand/2017/3/15/131340337990427608.jpg',
        'http://img3.imgtn.bdimg.com/it/u=2265732843,1016741023&fm=214&gp=0.jpg'
      ],
      swiperImgIndex: 0,
      rateValue: 4,
      activeTabsName: 'introduction',
      swipeable: true,
      // 环境图片
      environmentImg: [
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565064003538&di=0bfe74df75affa3575c0633e1249fa90&imgtype=0&src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2F100w0t000000iiin98D66.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565064044139&di=7ccb8fc44968236f0527078a7f684452&imgtype=0&src=http%3A%2F%2Fqcloud.dpfile.com%2Fpc%2F-nrQ3tZg6n8zGc9U18Y9J7m___dzPBcI_s3G-mRHFSeOcSrn2MuHhVsKZxZK3SoETYGVDmosZWTLal1WbWRW3A.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565064104328&di=a991af87fa9272ffbbe6bcb340f4d7ea&imgtype=0&src=http%3A%2F%2Fqcloud.dpfile.com%2Fpc%2Fb_9DuVHsFditTzI_3bXpSx4CoFQ05xML7COvkrWycCwHo8itsBkcmVncTI8kIYxjTYGVDmosZWTLal1WbWRW3A.jpg'
      ],
      // 商品-推荐图片
      recommendImg: [
        'http://img.jdzj.com/UserDocument/2017a/wwk123/Picture/201771018459.jpg',
        'http://img3.imgtn.bdimg.com/it/u=2265732843,1016741023&fm=214&gp=0.jpg',
        'http://qcloud.dpfile.com/pc/diacDietIVpWHijLsdzaMOHcKxi_54oYPqk5lKToU7kZWk8eZQMRW2FeuVD9x_wbTYGVDmosZWTLal1WbWRW3A.jpg',
        'http://qcloud.dpfile.com/pc/ONiIJDv9iH0PpvbnWPQkSPRps3rRRb52nK4tiVLKP7pW4zcMmE86gACFY5irlB1CTYGVDmosZWTLal1WbWRW3A.jpg',
        'http://qcloud.dpfile.com/pc/V2EYenMsIqufqtcu0zbFQ6PgUlq5pI4u7naqQ0GZCgLDO0P3XwjXE2b786aP6Pq4joJrvItByyS4HHaWdXyO_DrXIaWutJls2xCVbatkhjUNNiIYVnHvzugZCuBITtvjski7YaLlHpkrQUr5euoQrg.jpg',
        'http://img3.imgtn.bdimg.com/it/u=2265732843,1016741023&fm=214&gp=0.jpg'
      ],
      evalLoading: true,
      evalFinished: false,
      evalCondition: {
        PageIndex: 1,
        PageSize: 20,
        SearchKey: ''
      },
      evaluationList: [],
      evalRecordAmout: 0,
      // 点评图片
      evaluationImg: [
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565158183390&di=65ef010122a2e60832511bf3afa9dfcd&imgtype=0&src=http%3A%2F%2Fdingyue.nosdn.127.net%2FWfPNCWTd2tUOPl1jcuu1WwM6WRcYi42HMVnIAdpgAYlyW1533183995871compressflag.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565158183390&di=65ef010122a2e60832511bf3afa9dfcd&imgtype=0&src=http%3A%2F%2Fdingyue.nosdn.127.net%2FWfPNCWTd2tUOPl1jcuu1WwM6WRcYi42HMVnIAdpgAYlyW1533183995871compressflag.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565158183390&di=65ef010122a2e60832511bf3afa9dfcd&imgtype=0&src=http%3A%2F%2Fdingyue.nosdn.127.net%2FWfPNCWTd2tUOPl1jcuu1WwM6WRcYi42HMVnIAdpgAYlyW1533183995871compressflag.jpg'
      ],
      bussinessCondition: {
        IsRecommend: 1,
        SortType: 2,
        PageIndex: 1,
        PageSize: 20
      },
      // 推荐列表刷新
      isRefresh: false,
      // 显示门店定位地图
      showAmap: false,
      initAmap: false,

      buyBill: ''
    }
  },
  methods: {
    // 刷新
    onRefresh() {
      this.bussinessInduc = {}
      this.evalCondition.PageIndex = 1
      this.evalRecordAmout = 0
      this.evaluationList = []
      this.evalLoading = true
      this.getDetailInfo(this.$route.params.id)
      this.getDescription(this.$route.params.id)
      this.getPageList(this.$route.params.id)
    },
    // 列表刷新后的回调
    listRefresh() {
      this.isRefresh = false
      this.isLoading = false
    },
    //监听swiper的index
    swiperChange(index) {
      this.swiperImgIndex = index
    },
    // 预览swiper图片
    showSwiperImg(e) {
      let self = this
      ImagePreview({
        images: self.swiperImg,
        startPosition: self.swiperImgIndex,
        lazyLoad: true,
        onClose() {
          // do something
        }
      })
    },
    // 预览商家环境图片
    showEnvironmentImg(index) {
      let self = this
      ImagePreview({
        images: self.environmentImg,
        startPosition: index,
        lazyLoad: true,
        onClose() {
          // do something
        }
      })
    },
    // 点评加载更多
    evalOnLoad() {
      this.evalCondition.PageIndex = this.evalCondition.PageIndex + 1
      this.getPageList()
    },
    // 预览点评图片
    showEvaluationImg(images, index) {
      let self = this
      ImagePreview({
        images: images,
        startPosition: index,
        lazyLoad: true,
        onClose() {
          // do something
        }
      })
    },
    // 查看商品详情
    goGoodDetail() {
      this.$router.push({
        path: '/goodDetail'
      })
    },
    // 获取商家详情
    getDetailInfo(id) {
      getDetailInfo(id).then(res => {
        //console.log(res);
        if (res) {
          this.bussinessInfo = res.Data
          if (res.Data.AdvertPictures) {
            this.swiperImg = res.Data.AdvertPictures.split(',')
            for (let i = 0, len = this.swiperImg.length; i < len; i++) {
              this.swiperImg[i] = this.$webInfo.ImgDomain + this.swiperImg[i]
            }
          } else {
            this.swiperImg = [require('@/assets/images/heleasy.jpg')]
          }
          this.bussinessCondition.CategoryId = res.Data.CategoryId
          this.isRefresh = true
          this.initAmap = !this.initAmap
        }
      })
    },
    // 获取商家介绍
    getDescription(id) {
      getDescription(id).then(res => {
        //console.log(res);
        if (res) {
          this.bussinessInduc = res.Data
          if (res.Data.ShopPictures) {
            this.environmentImg = res.Data.ShopPictures.split(',')
            for (let i = 0, len = this.environmentImg.length; i < len; i++) {
              this.environmentImg[i] = this.$webInfo.ImgDomain + this.environmentImg[i]
            }
          } else {
            this.environmentImg = []
          }
        }
      })
    },
    // 获取商家评论列表
    getPageList(id) {
      getPageList(this.evalCondition, id).then(res => {
        //console.log(res);
        if (res) {
          this.evalRecordAmout = res.RecordAmout
          for (let i = 0, len = res.Data.length; i < len; i++) {
            if (res.Data[i].Images) {
              res.Data[i].Images = res.Data[i].Images.split(',')
              for (let j = 0, len_2 = res.Data[i].Images.length; j < len_2; j++) {
                res.Data[i].Images[j] = this.$webInfo.ImgDomain + res.Data[i].Images[j]
              }
            } else {
              res.Data[i].Images = []
            }
          }
          this.evaluationList = this.evaluationList.concat(res.Data)
          this.evalLoading = false
          if (this.evalCondition.PageIndex < res.TotalAmout) {
            this.evalFinished = false
            // 检测是否到底加载更多
            this.$refs['list'].check()
          } else {
            this.evalFinished = true
          }
        }
      })
    }
  },
  watch: {
    $route(to, from) {
      if (to.name == 'businessDetail' && from.name != 'buyBill' && from.name != 'writeEvaluation') {
        this.onRefresh()
        //this.getDetailInfo(to.params.id);
      }
    },
    showAmap(newVal, oldVal) {
      if (newVal) {
        ModalHelper.afterOpen()
      } else {
        ModalHelper.beforeClose()
      }
    }
  },
  beforeRouteUpdate(to, from, next) {
    next()
  },
  computed: {
    offsetTop() {
      return parseInt((this.clientWidth / this.$remUnit) * 10) //设置粘性布局时距离顶部距离PX换算
    }
  },
  created() {
    let self = this
    this.buyBill = '/buyBill/' + this.$route.params.id
    console.log(this.buyBill)
    //self.$route.meta.keepAlive = true; // 每次进到这个页面就重新设置为缓存
    if (this.$store.state.user.Lng && this.$store.state.user.Lat) {
      this.bussinessCondition.Lng = this.$store.state.user.Lng
      this.bussinessCondition.Lat = this.$store.state.user.Lat
    }
    // 获取商家详情
    this.getDetailInfo(this.$route.params.id)
    // 获取商家介绍
    this.getDescription(this.$route.params.id)
    // 获取商家评论列表
    this.getPageList(this.$route.params.id)
  },
  mounted() {},
  //在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等
  activated() {}
}
</script>

<style lang="scss" scoped>
.van-swipe-item__img {
  width: 100%;
  height: 180px;
}
.bussiness-info {
  position: relative;
  padding: 35px;
  .buy-btn {
    position: absolute;
    right: 30px;
  }
  &__avar {
    width: 180px;
    height: 180px;
  }
  &__content {
    margin-left: 20px;
    color: #000;
    .name {
      width: 320px;
      word-break: break-all;
    }
  }
}
.bussiness-time {
  padding: 10px 35px;
  border-top: 2px solid #f5f5f5;
  border-bottom: 2px solid #f5f5f5;
  .van-tag {
    border: 1px solid #dcdcdc;
    font-size: 12px;
  }
}
.bussiness-location {
  padding: 10px 35px;
}
.bussiness-introduction {
  font-size: 26px;
  .environment {
    border-bottom: 1px solid #f5f5f5;
    &__img {
      margin-bottom: 20px;
      margin-right: 20px;
    }
  }
  .location {
    border-bottom: 1px solid #f5f5f5;
  }
}
.bussiness-goods {
  .list {
    width: 100%;
    overflow-x: scroll;
  }
  .tab {
    width: 200px;
    text-align: center;
    .active {
      color: #ff435b;
    }
  }
  .goods-list {
    width: 550px;
    &__img {
      flex-basis: 30%;
    }
    &__content {
      flex-basis: 70%;
    }
    &__price {
      width: 200px;
      color: #ff435b;
      font-size: 30px;
    }
    &__buy {
      .van-button {
        padding: 0;
        width: 25px;
        height: 25px;
        line-height: 25px;
        font-size: 24px;
      }
    }
  }
}
.evaluation-item {
  padding: 20px 30px;
  &__avar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
  }
  &__content {
    width: 550px;
    position: relative;
    margin-left: 20px;
    .attention {
      position: absolute;
      top: 0px;
      right: 0px;
    }
    .name {
      width: 400px;
    }
    .status {
      color: #ff435b;
      padding: 4px 6px;
      border: 2px solid #ff435b;
      border-radius: 6px;
    }
  }
}
.evaluate {
  max-width: 750px;
  height: 120px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #fff;
  @include flex-content(center, center);
  .svg-icon {
    font-size: 70px;
  }
}
</style>
